<extension-feedback [extensionLength]="extensionList.length" [suggest]="tipsMap[tipsType]?.suggest" [tipsText]="tipsMap[tipsType].name">
  <div class="grid grid-cols-4 gap-4">
    <div *ngFor="let item of extensionList" class="w-full h-14" (click)="selectExtension(item)">
      <div
        [class.active]="extension === item.key"
        class="relative flex items-center justify-center w-full h-full border rounded-md extension"
        nzTooltipPlacement="bottom"
        [nzTooltipTitle]="item.title || item.label"
        eoNgFeedbackTooltip
        [nzTooltipMouseEnterDelay]="0.4"
      >
        <span *ngIf="!item.icon">{{ item.title || item.label }}</span>
        <i class="logobg absolute left-1.5 right-1.5 top-0 bottom-0" [ngStyle]="{ 'background-image': 'url(' + item.icon + ')' }"></i>
        <eo-iconpark-icon name="check" class="absolute bottom-0 right-0 check" size="18px"></eo-iconpark-icon>
      </div>
    </div>
  </div>

  <div class="py-2 my-2" *ngIf="optionList.length">
    <eo-ng-radio-group [ngModel]="currentOption" (ngModelChange)="selectOption($event)" class="w-full">
      <div class="grid grid-cols-3 gap-2">
        <label class="text" eo-ng-radio [nzValue]="item.value" *ngFor="let item of optionList">{{ item.label }}</label>
      </div>
    </eo-ng-radio-group>
  </div>

  <div class="mt-4" *ngIf="allowDrag && extensionList.length">
    <nz-upload nzType="drag" [nzBeforeUpload]="parserFile">
      <p class="ant-upload-text" i18n>Tap or drag files directly to this area</p>
      <p class="ant-upload-hint" i18n>Only supports importing a single file</p>
    </nz-upload>
    <div *ngIf="filename" class="h-4 my-2 text">{{ filename }}</div>
  </div>
</extension-feedback>
